/* 
    1. sass 文件的后缀是 .scss

    2. sass 文件里面完全兼容 css 语法

    3. 写sass独有的变量，四则运算，嵌套
    变量：$baseColor: #0f0;

    js类比：var baseColor = "#0f0";
*/

*{
    margin: 0;
    padding: 0;
}
$baseColor: #0f0;
$width: 100px;
$height: 200px;

.box{
    width: $width;
    height: $height;
    background: $baseColor;
}

.box1{
    width: 100 + 200px;
    height: $height - 150px;
    border: 2 * 20px solid #000;
    padding: (20px / 2); // 四则运算里面的除法需要特殊处理 / 本身在 css 里面有特殊的含义，例如 font 属性在设置字体大小和行高的时候，用到  /  
    font: 14px/28px;

    background: $baseColor;
}

/* .list{
    list-style: none;
}

.list .item {
    width: 100px;
    height:20px;
    line-height:20px;
    border: 1px solid #000;
    margin-bottom:20px;
    background: $baseColor;
    text-align: center;
}

.list .active {
    background-color: gold;
}

.list .item:hover {
    background-color: gold;
}    */

.list{
    list-style: none;
    // 后代元素
    // 子选择器   >.item 
    .item {
        width: 100px;
        height:20px;
        line-height:20px;
        border: 1px solid #000;
        margin-bottom:20px;
        background: $baseColor;
        text-align: center;

        //&: 代表父级选择器是 .item
        &:hover{
            background-color: gold;
        }
    }
    .active{
        background-color: gold;
    }
}